<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>修改银行卡</title>
		<script type="text/javascript" src="../../js/jquery-3.2.1.min.js" ></script>
		<script type="text/javascript" src="../../js/common.js" ></script>
	
	</head>
	<body>
		<!-- 修改的表格开始 -->
		<p >银行卡的修改</p>
		<table border="1" cellpadding="0" cellspacing="0"  width="500">
			
			<tr>
				<td>银行名称</td>
				<td>
					<select name="bankId" id="bankId">
						
					</select>
					
					<input type="hidden" name="id" value="${param.id}" />
				</td>
			</tr>
			<tr>
				<td>卡号</td>
				<td>
					<input name="cardNo" value="1234567812345678"/>
				</td>
			</tr>
			
			<tr>
				<td>有无芯片</td>
				<td>
					<input name="chip" type="radio" value="1" />有
					<input name="chip" type="radio" value="0" />无
				</td>
			</tr>
			
			<tr>
				<td>余额</td>
				<td>
					<input name="balance" value="22.33" />
				
				</td>
			</tr>
			
			<tr>
				<td>银行卡持有人</td>
				<td>
					<input name="owner" value="xq"  />
				
				</td>
			</tr>
			
			<tr>
				<td colspan="2">
					<input type="button"  onclick="update();" value="保存" />
				</td>
			</tr>
			
		</table>
		<!-- 修改的表格结束 -->
	
	
		<script type="text/javascript">
		
			var bankIdValue="";
			
			
			
			
			
			//单击修改按钮开始
			function update(){
				
				//1 卡号的验证
				var cardNo = $('input[name="cardNo"]').val();
				
				if(''==cardNo){
					
					alert('卡号不能为空..');
					return false;
				}else{
					
					var rg=/^[0-9]{16}$/g;
					
					var jieguo = rg.test(cardNo);
					if(jieguo == false){
						alert('你输入的卡号不是16位的数字');
						return false;
					}
				}
				
				//2 做余额的验证....
				var balance  = $('input[name="balance"]').val();
				var bankId  = $('select[name="bankId"]').val();
				var chip  = $('input[name="chip"]:checked').val();
				var owner  = $('input[name="owner"]').val();
				var id  = $('input[name="id"]').val();
				
				//3 发送请求 add
				$.ajax({
					async:true,
					data:{
						'method':'update',
						'cardNo':cardNo,
						'balance':balance,
						'bankId':bankId,
						'chip':chip,
						'owner':owner,
						'id':id,
					},
					url:getPath()+"/card",
					type:'post',
					dataType:'json',
					success:function(jsonData){
						var  code  = jsonData.result.code;
						if(code == '200'){
							window.location.href="card-list.html"
							
						}else{
							alert("添加失败...");
						}
					}
				});
				
			}
			
			
			//单击修改按钮结束
			
			
			
			
			$(function(){
				
				//1 拿到被修改的银行卡的id=5
				var id = ${param.id};
				//alert('id='+id);
				
				//$('input[name="id"]').val(id);
				
				//2 根据 银行卡id找到银行卡id=5的这条记录的所有信息 CardEntity findById(int id) ==>bankId=11
				//2拿到银行卡对应的所有信息开始
				$.ajax({
					data:{
						'method':'findById',
						'id':id,
					},
					url:getPath()+"/card",
					type:'post',
					dataType:'json',
					success:function(jsonData){
						
						//console.log(jsonData);
						
						bankIdValue = jsonData.data.bankId;
						
						//给考号赋值
						$('input[name="cardNo"]').val(jsonData.data.cardNo);
						$('input[name="balance"]').val(jsonData.data.balance);
						$('input[name="owner"]').val(jsonData.data.owner);
						
						var chip = jsonData.data.chip;
						console.log(chip);
						
						
						//2 遍历  chip  看value是否相等  如果相等 就选中
						
						var cps = $('input[name="chip"]');
						console.log(cps.length);
						
						cps.each(function(index,data){
							
							var val = $(data).val();
							
							if(chip == val){
								
								//radio要被选中
								$(data).attr('checked','checked');
								
							}
							
							
						});
						
						
						//alert(bankId);
					}
				});
				//2拿到银行卡对应的所有信息开始
				
				
				//3 拿到所有的银行列表  开始
				$.ajax({
					async:true,
					data:{
						'method':'findAll'
					},
					url:getPath()+"/bank",
					type:'post',
					dataType:'json',
					success:function(jsonData){
						
						var  code  = jsonData.result.code;
						
						if(code == '200'){
							
							//把银行要动态话
							
							//<option value="10">民生银行</option>
							//<option value="20">建设银行</option>
							
							//CTRL + K
							var bankId= $('#bankId');
							
							var data = jsonData.data;
							
							$(data).each(function(index,data){
								
								console.log(data);
								
								var valueField = data.valueField;
								var textField  = data.textField;
								
								var op = '<option value="'+valueField+'">'+textField+'</option>';
								console.log(op);
								
								bankId.append($(op));
								
							});
							
							
							//根据bankId决定哪个银行被选中
							//4 循环比较
							$('#bankId').find("option").each(function(index,data){
								
								var id = $(data).val();
								
								
								if(id == bankIdValue ){
									
									//是我们想要的银行 选中
									
									$(data).attr("selected","selected");
									
								}
								
							});
							
							
							
						}
					}
				});
				//3 拿到所有的银行列表  结束
				
				
				
			
			
			});
		
		</script>
	
	
	</body>
</html>